<template>
	<view class="vi_password" :class="{'disabled':disabled}">
		<input class="vi_password_input" v-model="inValue"
			:password="password"
			:placeholder="placeholder||''"
			:placeholder-class="placeholderClass||''"
			:maxlength="setting.maxlength"
			:disabled="disabled"
			:focus="focus"
			@input="onInput"
			@blur="onBlur"
			></input>
		<view class="vi_password_ico" @click="changeShow">
			<text class="iconfont" :class="iconSetting.close" v-if="password"></text>
			<text class="iconfont" :class="iconSetting.open" v-else></text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"viPassword",
		model:{
			prop: "value",
			event: "input"
		},
		props:{
			value:{
				type:[String,Number,null],
				default:""
			},
			placeholder:{
				type:[String,null],
				default:""
			},
			maxlength:{
				type:[Number,null],
				default:0
			},
			focus:{
				type:[Boolean,null],
				default:false
			},
			disabled:{
				type:[Boolean,null],
				default:false
			},
			placeholderClass:{
				type:[String,null],
				default:""
			},
			icon:{
				type:[Object,null],
				default:()=>({})
			}
		},
		data() {
			return {
				inValue:"",
				password:true,
				dicIcon:{
					close:"icon-eye-close",
					open:"icon-eye-open"
				}
			}
		},
		computed:{
			setting(){
				return {
					maxlength: this.maxlength ||26
				}
			},
			iconSetting(){
				if(this.$api.isObject(this.icon)){
					return Object.assign({},this.dicIcon,this.icon)
				}
				return this.dicIcon
			}
		},
		methods: {
			changeShow(){
				if(this.disabled){
					return
				}
				this.password = !this.password
			},
			close(){
				this.password = true;
			},
			onInput(e){
				this.$emit("input", this.inValue)
			},
			onBlur(e){
				this.$emit("blur", this.inValue)
			}
		},
		watch:{
			"value":{
				immediate:true,
				handler(newVal){
					this.inValue = this.$api.isDefined(newVal)? newVal :""
				}
			},
		}
	}
</script>

<style lang="scss">
/* 依赖变量
	$vi-txtColor-disable
*/
.vi_password{
	display: flex;
	align-items: center;
	justify-content: space-between;
	.vi_password_input{
		flex-grow: 1;
		margin-right: 0.75em;
		font-size: inherit;
	}
	.vi_password_ico{
		font-size: 120%;
	}
	&.disabled{
		.vi_password_input{
			color: $vi-txtColor-disable;
		}
		.vi_password_ico{
			color:$vi-color-disable;
		}
	}
}
</style>
